<template>
  <div class="screenItem">
    <div class="screenItem-con">
      <div
        :class="['screenItem-con-item', index === sortTypeIndex ? 'screenItem-con-item-check' : '']"
        v-for="(item, index) in sortType"
        @click="onSort(item, index)"
        :key="item.value">
        <span class="screenItem-con-item-text">{{item.label}}</span>

        <template v-if="sortTypeIndex === index">
          <i class="el-icon-bottom" v-if="isSortType"></i>
          <template v-if="isSortType">
            <x-icon class="screenItem-con-item-icon" type="ios-arrow-up" size="15"></x-icon>
          </template>
          <template v-else>
            <x-icon class="screenItem-con-item-icon" type="ios-arrow-down" size="15"></x-icon>
          </template>
        </template>
        <template v-else>
          <x-icon class="screenItem-con-item-icon" type="ios-arrow-down" size="15"></x-icon>
        </template>

      </div>
      <div class="screenItem-con-item" @click="showScreen = true">
        <span class="screenItem-con-item-text">筛选</span>
      </div>
    </div>

    <!--筛选弹框-->
    <div class="screenItem-pic" @click="showScreen = false" :style="{right: showScreen ? '0' : '-100%'}">
      <div class="screenItem-popup" @click.stop style="overflow: auto;">
        <!--地址选择-->
        <div class="screenItem-popup-class" style="padding-bottom: 12.5px" v-if="showScreen">
          <div class="screenItem-popup-class-list">
            <div class="screenItem-popup-class-location"></div>
            <areaSelect style="flex:1" @change="onAreaSelectChange" :areavalue="addressAreas">
              <div v-if="area_info" class="picker">
                <span>{{area_info}}</span>
              </div>
              <div v-else>请选择地址</div>
            </areaSelect>
          </div>
        </div>

        <!--分类-->
        <div class="screenItem-popup-class" v-if="cateGoodsCount.length && isClass">
          <div class="screenItem-popup-tit">商品分类</div>
          <div class="screenItem-popup-class-list">
            <div
              :class="['screenItem-popup-class-list-item', index === classListIndex ? 'screenItem-popup-class-list-item-check' : '']"
              v-for="(item, index) in cateGoodsCount"
              @click="onClass(item, index)"
              :key="index">
              <span>{{item.cate_name}}</span>
              <span>({{item.goods_count}})</span>
            </div>
          </div>
        </div>

        <!--渠道-->
        <div class="screenItem-popup-class" v-if="supplierList.length">
          <div class="screenItem-popup-tit">渠道</div>
          <div class="screenItem-popup-class-list">
            <div
              :class="['screenItem-popup-class-list-item', index === supplierListIndex ? 'screenItem-popup-class-list-item-check' : '']"
              v-for="(item, index) in supplierList"
              @click="onSupplier(item, index)"
              :key="index">
              <span>{{item.supplier_name}}</span>
            </div>
          </div>
        </div>

        <!--价钱筛选-->
        <div class="screenItem-popup-price">
          <div class="screenItem-popup-tit">价格区间</div>
          <div class="screenItem-popup-price-con">
            <input type="number" v-model="lowPrice" placeholder="最低价" pattern="[0-9]*"/>
            <span class="screenItem-popup-price-con-bor"></span>
            <input type="number" v-model="highPrice" placeholder="最高价" pattern="[0-9]*"/>
          </div>
        </div>

        <div class="screenItem-popup-btn">
          <div class="screenItem-popup-btn-reset" @click="onReset">重置</div>
          <div class="screenItem-popup-btn-fix" @click="onConfim">确定</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import { mapGetters, mapMutations, mapActions } from 'vuex'
  import eventBus from '../../utils/eventBus.js'

  export default {
    name: 'screenItem',
    props: {
      value: {},
      isClass: {
        type: Boolean,
        default: true
      },
      cateGoodsCount: {
        type: Array,
        default: () => []
      },
      supplierList: {
        type: Array,
        default: () => []
      }
    },
    data () {
      return {
        // 参数
        searchParams: {
          sort_type: 'discount', // 排序类型
          sort_desc: 1, // 是否倒序 1：倒序，0：正序
          price: undefined, // 价格
          cate_id: this.$route.query.cateId || undefined, // 分类id
          source: undefined,
          area_code: ''
        },
        // 排序类型
        sortType: [
          {
            label: '折扣',
            value: 'discount'
          },
          {
            label: '销量',
            value: 'seller'
          },
          {
            label: '价格',
            value: 'price'
          }
        ],
        sortTypeIndex: 0,
        isSortType: 1,

        // 弹框筛选
        showScreen: false,
        classListIndex: -1,
        supplierListIndex: -1,

        // 自定义价钱搜索
        lowPrice: '',
        highPrice: '',

        // 地址
        addressAreas: [],
        area_info: '',
        area_code: ''
      }
    },
    activated () {
      let _this = this
      eventBus.$on('defaultAddress', function (data) {
        if (data.flag) {
          // _this.getDefaultAddress(data)
          _this.getDefaultAddress(data.obj)
          _this.initialAssignment()
          _this.onReset()
          _this.$emit('onSoso', this.searchParams)
          // this.GET_DEFAULT_ADDRESS(_this.$emit('onSoso', this.searchParams))
        }
      })
    },
    created () {
      this.initialAssignment()
    },
    computed: {
      ...mapGetters(['defaultAddress'])
    },
    methods: {
      ...mapMutations(['getDefaultAddress']),
      ...mapActions(['GET_DEFAULT_ADDRESS']),

      // 初始赋值
      initialAssignment () {
        this.$emit('input', this.searchParams)
        this.addressAreas = this.defaultAddress.arr
        this.area_info = this.defaultAddress.info
        this.area_code = this.defaultAddress.code
        this.searchParams.area_code = this.defaultAddress.code
      },

      // 排序
      onSort (item, index) {
        this.isSortType = !this.isSortType
        if (this.sortTypeIndex !== index) {
          this.isSortType = 1
        }
        this.sortTypeIndex = index
        this.searchParams.sort_type = item.value
        this.searchParams.sort_desc = Number(this.isSortType)
        this.$emit('onSoso', this.searchParams)
        this.$emit('input', this.searchParams)
        this.onTop()
      },

      // 地址选择
      onAreaSelectChange (detail) {
        let area_info = []
        for (var i in detail) {
          area_info.push(detail[i].area)
        }
        this.addressAreas = detail
        let province = {}
        let city = {}
        let area = {}
        let street = {}
        detail.map((item, index) => {
          if (index == 0) {
            province = item
            return
          }
          if (index == 1) {
            city = item
            return
          }
          if (index == 2) {
            area = item
            return
          }
          if (index == 3) {
            street = item
          }
        })
        this.area_code = `${province.id}_${city.id}_${area.id}_${street.id || 0}`
        this.area_info = area_info.join(' ')
      },

      // 分类
      onClass (item, index) {
        if (this.classListIndex === index) {
          this.classListIndex = -1
          this.searchParams.cate_id = undefined
        } else {
          this.classListIndex = index
          this.searchParams.cate_id = item.cate_id
        }
      },

      // 渠道
      onSupplier (item, index) {
        if (this.supplierListIndex === index) {
          this.supplierListIndex = -1
          this.searchParams.source = undefined
        } else {
          this.supplierListIndex = index
          this.searchParams.source = item.supplier_id
        }
      },

      // 确定
      onConfim () {
        let lowPrice = parseFloat(this.lowPrice)
        let highPrice = parseFloat(this.highPrice)
        if (lowPrice > highPrice) {
          this.highPrice = lowPrice
          this.lowPrice = highPrice
        }
        this.searchParams.price = `${this.lowPrice},${this.highPrice}`
        this.searchParams.area_code = this.area_code
        this.getDefaultAddress({ code: this.area_code, info: this.area_info, arr: this.addressAreas })
        this.$emit('onSoso', this.searchParams)
        this.showScreen = false
        this.onTop()
      },

      // 重置
      onReset () {
        this.searchParams = {
          sort_type: 'discount', // 排序类型
          sort_desc: 1, // 是否倒序 1：倒序，0：正序
          price: undefined, // 价格
          cate_id: this.$route.query.cateId || undefined, // 分类id
          source: undefined
        }
        this.sortTypeIndex = 0
        this.isSortType = 1
        this.lowPrice = ''
        this.highPrice = ''
        this.classListIndex = -1
        this.supplierListIndex = -1
      },

      // 回到顶部
      onTop () {
        this.$nextTick(function () {
          document.body.scrollTop = document.documentElement.scrollTop = 0
        })
      }
    }
  }
</script>

<style lang="less">
  .screenItem {
    box-sizing: border-box;
    position: fixed;
    right: 0;
    left: 0;
    top: 88px;
    background: #fff;
    font-size: 13px;
    height: 40px;
    color: #000000;
    z-index: 2;

    .screenItem-con {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;

      .screenItem-con-item {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fbf8f7;
        width: 20%;
        height: 23px;
        border-radius: 5px;
        border: 1px solid #fff;
        line-height: 23px;

        .screenItem-con-item-icon {
          margin-left: 2px;
        }
      }

      .screenItem-con-item-check {
        border-color: #fe0000 !important;
        color: #fe0000 !important;
        fill: #fe0000 !important;
      }
    }
  }

  .screenItem-pic {
    background: rgba(0, 0, 0, 0.4);
    position: fixed;
    right: -100%;
    top: 0;
    bottom: 0;
    z-index: 200;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    transition: 0.2s all;
  }

  .screenItem-popup {
    width: 70%;
    font-size: 12px;
    height: 100%;
    background: #fbf8f7;
    -webkit-overflow-scrolling: touch;

    .screenItem-popup-class, .screenItem-popup-price {
      background: #fff;
    }

    .screenItem-popup-tit {
      color: #333333;
      font-size: 14px;
      padding-bottom: 10px;
    }

    .screenItem-popup-class {
      padding: 12.5px 0 0 16.5px;
      margin-bottom: 5px;

      .screenItem-popup-class-location {
        width: 17px;
        height: 17px;
        background: url("../../assets/img/icon_loction.png") no-repeat;
        background-size: cover;
        margin-right: 5px;
      }

      .screenItem-popup-class-list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        color: #9A9A9A;

        .screenItem-popup-class-list-item {
          padding: 4px 8px;
          background: #fbf8f7;
          border: 1px solid #fff;
          border-radius: 5px;
          flex-shrink: 0;
          margin-bottom: 10px;
          margin-right: 20px;
        }

        .screenItem-popup-class-list-item-check {
          border-color: #fe0000 !important;
          color: #fe0000 !important;
        }
      }
    }

    .screenItem-popup-price {
      padding: 15px 0 15px 16.5px;
      margin-bottom: 23px;

      .screenItem-popup-price-con {
        display: flex;
        align-items: center;

        input {
          width: 40%;
          height: 25px;
          border-radius: 5px;
          text-align: center;
          border: 1px solid #E5E5E5;
          background: #fff;
          outline: none;
        }

        .screenItem-popup-price-con-bor {
          height: 1px;
          width: 5%;
          margin: 0 3px;
          border-bottom: 1px solid #CACACA;
        }
      }
    }

    .screenItem-popup-btn {
      padding: 0 16.5px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;

      div {
        border-radius: 5px;
        height: 35px;
        line-height: 35px;
        width: 46%;
        text-align: center;
      }

      .screenItem-popup-btn-reset {
        background: #fff;
        color: #333333;
      }

      .screenItem-popup-btn-fix {
        background: #b0290f;
        color: #fff;
      }
    }
  }
</style>
